<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="addBtn">添加一条新的访客信息</button>
    <button class="delSel">删除选中</button>
    <button class="agesort">年龄从小到大</button>
    <table border=1 cellspacing=0 cellpadding=10>

        <thead>
            <tr>
                <th>序列号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
                <th>选择</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>1</td>
                <td>胡杭</td>
                <td>16</td>
                <td><button>删除</button></td>
            </tr> -->
        </tbody>
    </table>
    <script>
        var info = [{
            name: "胡杭",
            age: 16
        }, {
            name: "胜明",
            age: 22
        }, {
            name: "军毅",
            age: 21
        }, {
            name: "晓华",
            age: 13
        }, {
            name: "盛聪",
            age: 23
        }, {
            name: "侦剑",
            age: 32
        }, {
            name: "红翔",
            age: 25
        }, {
            name: "超维",
            age: 18
        }, {
            name: "士琪",
            age: 22
        }, {
            name: "艳华",
            age: 20
        }];
        let tbody = document.querySelector('tbody');
        // console.log(tbody);
        let addBtn = document.querySelector(".addBtn")
            // console.log(addBtn);
        let delBtn = tbody.querySelectorAll("button")
        console.log(delBtn);
        // let delBtn = tbody.getElementsByTagName("button")
        let delSel = document.querySelector('.delSel');
        // console.log(delSet);
        let agesort = document.querySelector('.agesort');
        let index = 0;

        addBtn.onclick = function() { //回调函数
            console.log(index);

            if (index < info.length) {
                let newTr = document.createElement("tr") //创建元素节点
                tbody.appendChild(newTr)
                    // console.log(newTr);
                newTr.innerHTML = ` 
                <td>${index+1}</td>
                <td>${info[index].name}</td>
                <td>${info[index].age}</td>
                <td><button>删除</button></td>
                <td><input type="checkbox"></td>
                `;

                delBtn = tbody.querySelectorAll("button");
                // console.log(delBtn);
                delBtn.forEach(function(el) {
                    // console.log(el);
                    el.onclick = function() {
                        console.log(el.parentElement.parentElement);
                        el.parentElement.parentElement.remove()
                    }
                })


                index++
            }
            let fxk = document.querySelectorAll('input')
            console.log(fxk);
            delSel.onclick = function() {
                fxk.forEach(function(item) {
                    if (item.checked == true) {
                        console.log(item);
                        item.parentNode.parentNode.remove()
                    }
                })
            }
            agesort.onclick = function() {
                let tr = tbody.querySelectorAll('tr')
                console.log(tr);
                for (let i = 0; i < info.length; i++) {
                    for (let j = 0; j < info.length - 1; j++) {
                        if (info[j]['age'] > info[j + 1]['age']) {
                            let temp;
                            temp = info[j];
                            info[j] = info[j + 1];
                            info[j + 1] = temp;
                        }
                    }
                }
                console.log(info);

            }
        }
    </script>
</body>

</html>